import React, { useEffect, useState } from 'react';
import { getUserList } from '../../api/user';
import {Table} from 'antd'
const Index = () => {

  const [userList,setUserList] = useState()

  // 创建一个页码
  const [current, setCurrent] = useState(1)

  useEffect(()=>{
    getUserList().then(res => {
      // console.log(res);
      setUserList(res.data)
    })
  }, [])



  // table 列的配置
  const columns = [
    {
      title: '序号',
      dataIndex: 'userid',
      render(t,r,i){
        /*
          render: 是用来自定义当前列的内容用的，该函数有三个参数
          第一个：如果有设置 dataIndex，那么该参数就是 dataIndex 的值，
                如果没有设置 dataIndex 那么该参数就是整条数据
          第二个：该参数是整条数据，当前对象中的所有内容
          第三个：是当前的索引值
        */
        // console.log(t,r,i);

        return (<span>{(current - 1) * 10 + i + 1}</span>)
      }
    },
    {
      title: '用户名',
      dataIndex: 'nickname',
      key: 'nickname'
    },
    {
      title: '手机号',
      dataIndex: 'tel',
      key: 'tel',
    },
    {
      title: '验证码',
      dataIndex: 'telcode',
      key: 'telcode',
    }
  ];

  return (
    <div>
      <Table
      dataSource={userList}
      rowKey='userid'
      columns={columns}
      scroll={{
        y: 450
      }}
      pagination={{
        current,
        onChange(page){
          setCurrent(page)
        }
      }}
       />;
    </div>
  );
};

export default Index;
